<template>
    <div id="menulist">
        <span>menulist</span>
        <div>{{ $route.meta.title }}</div>
        <div>menulist：{{ menulist }}</div>
        <div>page：{{ page }}</div>
        <div>total：{{ total }}</div>
        <div>size：{{ size }}</div>
        <div>get_menulist：{{ get_menulist }}</div>
        <div>get_menupage：{{ get_menupage }}</div>
        <div>get_menutotal：{{ get_menutotal }}</div>
    </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
    computed: {
        ...mapState({
            menulist: state => state.menu.menulist,
            page: state => state.menu.page,
            total: state => state.menu.total,
            size: state => state.menu.size
        }),
        ...mapGetters({
            get_menulist: 'menu/getters_menulist',
            get_menupage: 'menu/getters_page',
            get_menutotal: 'menu/getters_total'
        })
    },
    methods: {
        ...mapMutations({
            m_menulist: 'menu/mutations_menulist',
            m_menupage: 'menu/mutations_menupage',
            m_menutotal: 'menu/mutations_menutotal'
        }),
        ...mapActions({
            a_menulist: 'menu/actions_menulist'
        })
    }
}
</script>
<style scoped>
#menulist {
    background-color: pink;
    width: 400px;
    height: auto;
    margin: 200px auto;
    text-align: center;
    /* vertical-align: middle; */
}
</style>